﻿
@{
    ViewBag.Title = "Login";
    Layout = "~/Views/Shared/_Login.cshtml";
}

<p style="position:absolute;right:10px;top:10px">没有账号？请<a href="/Login/Register">注册</a></p>
<form action="">
    <div class="register-box">
        <label for="username" class="username_label">
            用 户 名
            <input class="req" name="name" maxlength="20" type="text" placeholder="您的用户名或手机号" />
        </label>
        <div class="tips"></div>
    </div>
    <div class="register-box">
        <label for="username" class="other_label">
            密 码
            <input class="req" name="pwd" maxlength="20" type="password" placeholder="建议至少使用两种字符组合" />
        </label>
        <div class="tips"></div>
    </div>
    <div class="register-box">
        <label for="username" class="other_label">
            验 证 码
            <input id="qq" maxlength="20" type="text" placeholder="请输入验证码" />
        </label>
        <span id="code"></span>
        <div class="qqq tips"></div>
    </div>
    <div class="submit_btn">
        <button type="button" id="submit_btn">立 即 登 录 </button>
        <div class="tips"></div>
    </div>
</form>
<script>

    $("input.req").change(function () {

        if (this.value != "") {
            $(this).parent().next("div").text("");
            $(this).parent().next("div").css("color", '#ccc');
        }
    })
    // 	验证码
    //	 验证码刷新
    function code() {
        var str = "qwertyuiopasdfghjklzxcvbnm1234567890QWERTYUIOPLKJHGFDSAZXCVBNM";
        var str1 = "";
        for (var i = 0; i < 4; i++) {
            str1 += str.charAt(Math.floor(Math.random() * 62))
        }

        //str1 = str1.substring(1)
        $("#code").text(str1);

    }
    code();
    $("#code").click(code);
    //	验证码验证
    $('#qq').blur(function () {

        if ($(this).val().length == 0) {
            $(this).parent().next().next("div").text("");
            $(this).parent().next().next("div").css("color", '#ccc');
        } else if ($(this).val().toUpperCase() != $("#code").text().toUpperCase()) {
            $(this).parent().next().next("div").text("验证码不正确");
            $(this).parent().next().next("div").css("color", 'red');
        } else {
            $(".tips").eq(0).html("");
            $(this).parent().next().next("div").text("");
           
        }
    })
    $("#submit_btn").click(function () {
        for (var j = 0; j < 2; j++) {

            if ($('input').eq(j).val().length == 0) {
                $('input').eq(j).focus();
                
                $('input').eq(j).parent().next(".tips").text("此处不能为空");
                $('input').eq(j).parent().next(".tips").css("color", 'red');

  
                return;
            }

        }

        if ($("#qq").val().length == 0 || $("#qq").val().toUpperCase() != $("#code").text().toUpperCase()) {
            $(".tips").eq(2).html("请先输入正确的验证码！");
            $(".tips").eq(2).css("color", 'red');
          
            return;
        }
        else if ($(".qqq:first").text() == "") {

            var p = $("input");

            $.ajax({
                type: 'post',
                url: '/Login/Valid',
                async: true,
                dataType: 'json',
                data: { 'name': p[0].value, 'pwd': p[1].value },
                success: function (data) {
         
                    if (data == 0)
                        window.location.href = "/Home/Home";
                    else
                        alert("用户名或密码错误！");
                },
                error: function () {
                    alert("网络错误!");
                }
            });
        }
    })

</script>